<template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
    <n-loading-bar-provider>
      <NDialogProvider>
        <SiteContainer>
          <NLayout position="absolute">
            <NLayout has-sider position="absolute">
              <NLayoutSider :collapsed-width="0" bordered>
                <NMenu v-model:value="$route.path" :options="options"></NMenu>
              </NLayoutSider>
              <NLayout content-style="min-height: 100vh;padding:32px">
                <NuxtPage />
                <NuxtLink></NuxtLink>
              </NLayout>
            </NLayout>
          </NLayout>
        </SiteContainer> </NDialogProvider
    ></n-loading-bar-provider>
  </n-config-provider>
</template>
<script setup lang="ts">
// import AddDomainButton from '@/components/AddDomainButton.vue'
// import { AddDomainButton } from '@/.nuxt/components';
import {
  NLayout,
  NLayoutSider,
  NButton,
  NMenu,
  NDialogProvider,
  NLoadingBarProvider,
  NConfigProvider,
  type MenuOption
} from 'naive-ui'
// import {on} from 'vue'
import { NuxtLink } from '#components'
// useNextLink()
import { useDomain } from '@/stores/domain'
import { zhCN, dateZhCN } from 'naive-ui'
import MenuItem from '@/components/MenuItem.vue'
import SiteContainer from '@/components/SiteContainer.vue'

const defaultMenus = [
  {
    label: () =>
      h(
        NuxtLink,
        { to: '/new-domain' },
        { default: () => h(NButton, {}, { default: () => 'new doamin' }) }
      ),
    key: '/new-domain'
  },
  { key: 'divider-1', type: 'divider' }
]
const domains = useDomain()

const options: Ref<MenuOption[]> = computed(() => {
  const ds = domains.domains.map((d) => {
    const du = `/domain/${d}`
    return {
      label: () => h(NuxtLink, { to: du }, { default: () => h(MenuItem, { domain: d }) }),
      key: du
    }
  })
  return [...defaultMenus, ...ds]
})

domains.getDomains()
</script>
